<template>
  <div class="award-list table-theme">
    <el-card>
      <div class="award-list-menu">
        <div class="award-list-menu-left">
          <div class="status-view">
            <el-select v-model="type" placeholder="奖品类型" @change="init(1)">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="status-view">
            <el-select
              v-model="shipping_status"
              placeholder="地址"
              @change="init(1)"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="award-list-menu-right">
          <div class="search-view">
            <refresh-button @refresh="refreshPage"></refresh-button>
          </div>
          <div class="search-view add">
            <el-button type="primary" @click="onDerive">导出</el-button>
          </div>
        </div>
      </div>
      <p style="text-align: right; line-height: 30px">总数据数：{{ total }}</p>
      <el-table :data="list">
        <el-table-column
          label="序号"
          align="center"
          prop="record_id"
        ></el-table-column>
        <el-table-column
          label="用户ID"
          align="center"
          prop="user_id"
        ></el-table-column>
        <el-table-column label="头像" align="center" width="80">
          <template slot-scope="scope">
            <el-image
              style="width: 60px; hegiht: 60px"
              :src="scope.row.heard_img"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="用户名" align="center" prop="nickname">
        </el-table-column>
        <el-table-column
          label="联系方式"
          align="center"
          prop="mobile_phone"
        ></el-table-column>
        <el-table-column
          label="联系人"
          align="center"
          prop="accept_name"
        ></el-table-column>
        <el-table-column
          label="地址"
          align="center"
          prop="address"
        ></el-table-column>
        <el-table-column
          label="奖品"
          align="center"
          prop="prize"
        ></el-table-column>
        <el-table-column label="奖品图片" align="center">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.prize_img"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="type"
        ></el-table-column>
        <el-table-column
          label="收货地址"
          align="center"
          prop="shipping_status"
        ></el-table-column>
        <el-table-column
          label="获奖时间"
          align="center"
          prop="add_time"
        ></el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
export default {
  props: ["lottery_id"],
  components: {
    ImgPopover,
  },
  data() {
    return {
      total: 0,
      page: 0,
      type: "",
      shipping_status: "",
      typeList: [
        {
          value: 0,
          label: "虚拟",
        },
        {
          value: 1,
          label: "实物",
        },
      ],
      statusList: [
        {
          value: 0,
          label: "未填",
        },
        {
          value: 1,
          label: "已填",
        },
      ],
      list: []
    };
  },
  methods: {
    init(e) {
      this.page = e;
      let data = {
        page: e ? e - 1 : 0,
        limit: 10,
        type: this.type,
        shipping_status: this.shipping_status,
        lottery_id: this.lottery_id,
      };
      this.$http(this.$ApiList.LotteryRecord, data).then((res) => {
        this.list = res.datas.data;
        this.total = res.datas.count;
      });
    },
    refreshPage() {
      this.type = "";
      this.shipping_status = "";
      this.init(1);
    },
    onDerive(){
      if(this.list.length){
        window.location.href = `${this.$domain}furniture/Adminexcel/LotteryGetData?lottery_id=${this.lottery_id}&
                            type=${this.type}&shipping_status=${this.shipping_status}`
      }else{
        this.$message.error('数据为空不可导出！');
      }
      
    }
  },
  created() {
    this.init();
  },
};
</script>

<style>
.award-list {
  width: 100%;
  padding: 20px 20px;
}
.award-list .award-list-menu {
  display: flex;
}
.award-list-menu .add {
  margin-right: 10px;
}
.award-list-menu-left .status-view {
  margin-left: 10px;
}
.award-list-menu-left {
  flex: 1;
  display: flex;
}
.award-list-menu-right {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
}

.award-list-menu .status-view {
  width: 150px;
}
.award-list-menu .search-view {
  margin-right: 10px;
  display: flex;
}
</style>